.global-content {
    .content {
        box-sizing: border-box;
        padding: 0 8px;

        .all-notice {
            position: absolute;
            top: 0;
            left: 0;
            width: 220px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            color: #BBF3FF;
            font-size: 14px;
        }

        .section1 {
            .section-left {
                float: left;
                width: 332px;

                .section-left-item {
                    box-sizing: border-box;
                    padding: 8px 16px 0;
                    width: 100%;
                    height: 198px;
                    margin-bottom: 10px;
                    background: url("../img/index/MO1.png") no-repeat center;

                    .charts-box {
                        width: 100%;
                        height: 140px;
                        padding-top: 8px;
                        box-sizing: border-box;
                    }

                    .warn-notice-box {
                        .notice-icon {
                            float: left;
                            width: 140px;
                            height: 48px;
                            line-height: 48px;
                            color: #fff;
                            font-size: 14px;

                            .danger-icon {
                                margin: 0 10px 0 18px;
                                display: inline-block;
                                vertical-align: middle;
                                width: 24px;
                                height: 34px;
                                background: url("../img/index/danger.png") no-repeat center;
                            }
                        }

                        .notice-list {
                            float: left;
                            height: 48px;
                            width: 160px;
                            background: url("../img/index/notice-right-bg.png") no-repeat center;

                            p {
                                line-height: 24px;
                                float: left;
                                width: 80px;
                                text-align: center;
                                font-size: 12px;
                                height: 24px;

                                .notice-list-title {
                                    color: #fff;
                                }

                                .notice-list-num {
                                    color: #fff;

                                    .num-color1 {
                                        color: #45D321;
                                    }

                                    .num-color2 {
                                        color: #F8E71C;
                                    }

                                    .num-color3 {
                                        color: #F56D23;
                                    }

                                    .num-color4 {
                                        color: #EB3432;
                                    }
                                }
                            }
                        }
                    }

                    .remind-box {
                        margin-top: 3px;

                        table {
                            width: 100%;

                            tr {
                                padding-bottom: 2px;
                                display: inline-block;
                                width: 100%;
                            }

                            th {
                                height: 38px;
                                vertical-align: middle;
                                width: 60px;
                                color: #4BCEEC;
                                background: #1081D0;
                                background: rgba(16,129,208,.2);
                                position: relative;
                                font-size: 12px;

                                &:after {
                                    display: block;
                                    content: " ";
                                    width: 5px;
                                    height: 5px;
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    background: url("../img/index/th-bg.png") no-repeat center;
                                }
                            }

                            td {
                                width: 80px;
                                text-align: center;
                                vertical-align: middle;
                                background: rgba(16,129,208,.1);

                                .remind-name {
                                    font-size: 12px;
                                    color: #97B8C9;
                                    line-height: 16px;
                                }

                                .remind-num {
                                    font-size: 12px;
                                    color: #fff;
                                }
                            }
                        }
                    }

                    .section-left-item-title {
                        p {
                            margin-right: 8px;
                            width: 69px;
                            height: 63px;
                            float: left;
                            background: url("../img/index/left-nav-list.png") no-repeat center;

                            span {
                                display: block;
                                text-align: center;

                                &.list-num {
                                    margin: 4px 0 2px;
                                    font-size: 20px;
                                    line-height: 20px;
                                    color: #EB3432;
                                }

                                &.list-name {
                                    font-size: 12px;
                                    color: #B6E9F3;
                                    line-height: 16px;
                                }
                            }

                            &.last {
                                margin-right: 0;
                            }
                        }
                    }
                }
            }

            .section-middle {
                float: left;
                width: 666px;
                margin: 0 10px;
                background: url("../img/index/MO3bg.png") no-repeat center;
                height: 406px;
                padding: 6px 5px;
                box-sizing: border-box;

                .maps-box {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    background: url("../img/index/Bitmap.png") no-repeat center;

                    .maps-content-box {
                        &.open {
                            display: block;
                        }
                        background: rgba(0,0,0,.6);
                        border: 1px solid transparent;
                        box-sizing: border-box;
                        padding: 6px;
                        border-radius: 5px;
                        transition: all 0.3s;
                        position: absolute;
                        display: none;

                        p {
                            width: 100%;
                            line-height: 17px;
                            color: #fff;
                            font-size: 12px;

                            &.title {
                                margin-bottom: 5px;
                            }
                        }
                    }

                    .fxd1s {
                        position: absolute;
                        width: 22px;
                        height: 22px;
                        top: 141px;
                        left: 177px;
                        cursor: pointer;

                        .maps-content-box {
                            // width: 56px;
                            width: 58px;
                            top: -36px;
                            left: 50%;
                            margin-left: -29px;

                            p {}
                        }
                    }

                    .fxd2s {
                        position: absolute;
                        width: 22px;
                        height: 22px;
                        top: 109px;
                        right: 125px;
                        cursor: pointer;

                        .maps-content-box {
                            // width: 56px;
                            width: 60px;
                            top: -36px;
                            left: 50%;
                            margin-left: -29px;

                            p {}
                        }
                    }

                    .cjs {
                        position: absolute;
                        width: 60px;
                        height: 60px;
                        top: 13px;
                        left: 243px;
                        cursor: pointer;

                        .maps-content-box {
                            // width: 56px;
                            width: 88px;
                            top: 13px;
                            left: 60%;

                            p {}
                        }
                    }

                    .wxys {
                        position: absolute;
                        width: 22px;
                        height: 22px;
                        bottom: 70px;
                        left: 263px;
                        cursor: pointer;

                        .maps-content-box {
                            // width: 56px;
                            width: 70px;
                            text-align: center;
                            top: -53px;
                            left: 50%;
                            margin-left: -29px;

                            p {}
                        }
                    }

                    .cgs {
                        position: absolute;
                        width: 22px;
                        height: 22px;
                        top: 67px;
                        right: 223px;
                        cursor: pointer;

                        .maps-content-box {
                            // width: 56px;
                            width: 228px;
                            top: 28px;
                            right: -50px;
                            // margin-left: -29px;
                            p {}
                        }
                    }

                    .mpas-mark {
                        position: absolute;
                        bottom: 28px;
                        left: 20px;

                        span {
                            color: #333333;
                            font-size: 12px;
                            display: block;
                            line-height: 12px;
                            padding-left: 16px;
                            position: relative;
                            margin-top: 8px;

                            &:after {
                                display: block;
                                width: 10px;
                                height: 10px;
                                position: absolute;
                                left: 0;
                                top: 0;
                                content: " ";
                            }

                            &.cg {
                                &:after {
                                    background: url("../img/index/cg.png") no-repeat center;
                                }
                            }

                            &.wxy {
                                &:after {
                                    background: url("../img/index/wxy.png") no-repeat center;
                                }
                            }

                            &.fxd {
                                &:after {
                                    background: url("../img/index/fxd.png") no-repeat center;
                                }
                            }

                            &.cj {
                                &:after {
                                    background: url("../img/index/cj.png") no-repeat center;
                                }
                            }
                        }
                    }
                }
            }

            .section-right {
                float: left;
                width: 332px;

                .section-right-item {
                    width: 100%;
                    height: 198px;
                    box-sizing: border-box;
                    padding: 2px;
                    border: 1px solid #0F77C3;
                    margin-bottom: 10px;

                    .item-nav {
                        width: 55px;
                        float: left;

                        .navs {
                            transition: all 0.3s;
                            display: table;
                            width: 100%;
                            height: 64px;
                            text-align: center;
                            line-height: 16px;
                            font-size: 12px;
                            background: rgba(16,129,208,.1);
                            cursor: pointer;
                            position: relative;
                            margin-bottom: 1px;

                            &.on {
                                background: rgba(16,129,208,.3);
                            }

                            &:hover {
                                background: rgba(16,129,208,.3);
                            }

                            &:after {
                                display: block;
                                content: " ";
                                width: 5px;
                                height: 5px;
                                position: absolute;
                                top: 0;
                                right: 0;
                                background: url("../img/index/th-bg.png") no-repeat center;
                            }

                            span {
                                display: table-cell;
                                vertical-align: middle;
                                color: #4BCEEC;
                            }
                        }
                    }

                    .item-content {
                        float: left;

                        .item-content-tj {
                            background: rgba(16,129,208,.1);

                            ol {
                                li {
                                    float: left;
                                    box-sizing: border-box;
                                    border-left: 1px solid #08284E;
                                    width: 76px;
                                    height: 45px;
                                    text-align: center;

                                    .tj-name {
                                        color: #97B8C9;
                                        font-size: 12px;
                                        margin-top: 6px;
                                    }

                                    .tj-num {
                                        color: #BEF3FF;
                                        font-size: 12px;
                                        margin-top: 6px;
                                    }

                                    &.first {
                                        width: 47px;
                                        height: 45px;
                                        border-left-color: transparent;

                                        .icon {
                                            width: 100%;
                                            height: 18px;
                                            margin-top: 5px;
                                            background: url("../img/index/normal.png") no-repeat center;

                                            &.danger {
                                                background: url("../img/index/danger-right.png") no-repeat center;
                                            }
                                        }

                                        .icon-num {
                                            color: #BEF3FF;
                                            font-size: 12px;
                                            text-align: center;
                                            margin-top: 5px;
                                        }
                                    }
                                }
                            }
                        }

                        .item-content-table {
                            padding: 5px 4px;
                            box-sizing: border-box;

                            .table-box {
                                width: 100%;
                                height: 141px;
                                background: url("../img/index/bg-line.png") no-repeat center;

                                table {
                                    width: 100%;

                                    thead {
                                        tr {
                                            td {
                                                height: 22px;
                                                color: #BEF3FF;
                                            }
                                        }
                                    }

                                    tr {
                                        td {
                                            color: #97B8C9;
                                            font-size: 12px;
                                            vertical-align: middle;
                                            height: 25px;
                                            text-align: center;
                                            width: 88px;
                                        }
                                    }
                                }

                                .contents-box {
                                    width: 100%;

                                    ul {
                                        float: left;
                                        width: 89px;

                                        li {
                                            text-align: center;
                                            width: 100%;
                                            height: 25px;
                                            line-height: 24px;
                                            color: #BEF3FF;
                                            font-size: 12px;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .audio-list {
                        .audio-box {
                            background: #fff;
                            width: 163px;
                            height: 96px;
                            float: left;
                        }
                    }
                }
            }
        }

        .section2 {
            .section2-left {
                position: relative;
                float: left;
                width: 360px;
                height: 248px;
                background: url("../img/index/MO6bg.png") no-repeat center;

                .section2-left-content {
                    height: 100%;

                    .ection2-left-content1 {
                        float: left;
                        width: 236px;
                        height: 100%;
                    }

                    .ection2-left-content2 {
                        float: right;
                        width: 122px;
                        height: 100%;
                        box-sizing: border-box;
                        padding: 0 9px;

                        .titles {
                            text-align: left;
                            font-size: 12px;
                            color: #B6E9F3;
                            margin: 29px 0 10px;
                        }

                        ul {
                            li {
                                color: #97B8C9;
                                font-size: 12px;
                                padding-left: 20px;
                                position: relative;
                                line-height: 19px;

                                &.num1 {
                                    &:after {
                                        background: url("../img/index/1.png") no-repeat center;
                                    }
                                }

                                &.num2 {
                                    &:after {
                                        background: url("../img/index/2.png") no-repeat center;
                                    }
                                }

                                &.num3 {
                                    &:after {
                                        background: url("../img/index/3.png") no-repeat center;
                                    }
                                }

                                &.num4 {
                                    &:after {
                                        background: url("../img/index/4.png") no-repeat center;
                                    }
                                }

                                &.num5 {
                                    &:after {
                                        background: url("../img/index/5.png") no-repeat center;
                                    }
                                }

                                &.num6 {
                                    &:after {
                                        background: url("../img/index/6.png") no-repeat center;
                                    }
                                }

                                &.num7 {
                                    &:after {
                                        background: url("../img/index/7.png") no-repeat center;
                                    }
                                }

                                &.num8 {
                                    &:after {
                                        background: url("../img/index/8.png") no-repeat center;
                                    }
                                }

                                &.num9 {
                                    &:after {
                                        background: url("../img/index/9.png") no-repeat center;
                                    }
                                }

                                &.num10 {
                                    &:after {
                                        background: url("../img/index/10.png") no-repeat center;
                                    }
                                }

                                &:after {
                                    display: block;
                                    content: "";
                                    height: 16px;
                                    width: 16px;
                                    position: absolute;
                                    top: 1px;
                                    left: 0;
                                }
                            }
                        }
                    }
                }
            }

            .section2-middle {
                position: relative;
                float: left;
                width: 380px;
                margin: 0 10px;
                height: 248px;
                background: url("../img/index/MO7bg.png") no-repeat center;

                .section2-middle-nav {
                    position: absolute;
                    top: 115px;
                    left: 10px;

                    .names {
                        width: 14px;
                        font-size: 12px;
                        color: #97B8C9;
                        line-height: 16px;
                        text-align: center;
                        margin-left: 12px;
                        position: relative;
                        float: left;
                    }
                }

                .section2-middle-icon {
                    position: absolute;
                    height: 10px;
                    top: 100px;
                    left: 10px;

                    p {
                        float: left;
                        width: 14px;
                        font-size: 12px;
                        color: #97B8C9;
                        line-height: 16px;
                        text-align: center;
                        margin-left: 12px;
                        position: absolute;
                        bottom: 0;

                        em.icon-landmine {
                            display: inline-block;
                            width: 14px;
                            height: 14px;
                            background: url("../img/index/landmine.png") no-repeat right;
                            position: relative;
                            left: 2px;
                            margin-bottom: 2px;
                        }
                    }
                }
            }

            .section2-right {
                position: relative;
                float: left;
                width: 590px;
                height: 248px;
                background: url("../img/index/MO8bg.png") no-repeat center;
            }
        }
    }
}
